<template>
  <div class="">
    <el-card>
      <el-row>
        <!-- 实时数据 -->
        <el-col :span="16">
          <LiveOverview :tabs="realTimeDataFilter" @refresh="refreshStatic" />
        </el-col>

        <!-- 管理员信息 start-->
        <el-col :span="8" v-if="status == 1">
          <PieChart
            :series-obj="seriesObj"
            :legend="legend"
            :tooltip="tooltip"
            :color="color"
            height="180px"
          />
        </el-col>
        <!-- 管理员信息 end-->
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'CompanyTimeData',
  components: {},
  props: {
    // 当前列表状态
    status: [Number, String],
    // 统计数据
    statisticsData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      // 实时数据列表
      realTimeData: [
        {
          isShow: true,
          key: 'pendReviewSum',
          label: '待审核',
          value: 4500
        },
        {
          isShow: true,
          key: 'rejectSum',
          label: '驳回',
          value: 1800
        },
        {
          isShow: true,
          key: 'all',
          label: '全部',
          value: 1800
        },
        {
          isShow: true,
          key: 'joinAndFreezeOnMonthSum',
          label: '本月',
          value: 1800
        }
      ],
      // 图标配置
      legend: {
        orient: 'vertical',
        x: '50%',
        y: '50%',
        data: ['待审核', '驳回']
      },
      color: ['#709DEF', '#D1D1D1'],
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {d}%'
      },
      seriesObj: {
        name: '占比',
        type: 'pie',
        radius: ['50%', '70%'],
        center: ['30%', '60%'],
        label: {
          normal: {
            show: true,
            zlevel: 1,
            padding: [0, 8, 0, 8],
            backgroundColor: '#fff',
            position: 'center',
            formatter: ['{value|{d}%}', '{name|{b}}'].join('\n'),
            rich: {
              value: {
                color: '#303133',
                fontSize: 18,
                fontWeight: 'bold'
              },
              name: {
                color: '#303133'
              }
            }
          }
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '16',
            fontWeight: 'bold'
          }
        },
        // 图片数据
        data: [
          { value: 0, name: '待审核', key: 'pendReviewSum' },
          { value: 0, name: '驳回', key: 'rejectSum' }
        ]
      }
    }
  },
  computed: {
    // 实时数据列表过滤
    realTimeDataFilter() {
      const status = Number(this.status)
      if (status === 1) {
        // 待审核
        return this.realTimeData.slice(0, 2)
      } else {
        // 已审核
        return this.realTimeData.slice(2)
      }
    }
  },
  watch: {
    statisticsData() {
      this.setStatistics()
    }
  },
  created() {
    // 设置数据
    this.setStatistics()
  },
  mounted() {},
  methods: {
    // 点击刷新
    refreshStatic() {
      this.$emit('refresh')
    },

    // 设置数据
    setStatistics() {
      this.seriesObj.data = this.seriesObj.data.map(el => {
        return { ...el, value: this.statisticsData[el.key] }
      })
      // 统计数据赋值
      this.realTimeData = this.realTimeData.map(el => {
        if (el.key === 'all') {
          return { ...el, value: this.statisticsData.freezeSum + this.statisticsData.joinedSum }
        }
        return { ...el, value: this.statisticsData[el.key] }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
